{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<form class="layui-form gg-form-bar border-t border-x" lay-filter="barsearchform">
    <div class="layui-input-inline" style="width:240px">
        <input type="text" name="keywords" placeholder="输入关键字" class="layui-input" autocomplete="off" />
    </div>
    <div class="layui-input-inline" style="width:150px;">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
        <button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
    </div>
</form>
<div class="p-3">
    <div class="gg-form-bar border-t border-x" style="padding-bottom:12px;">
        <button class="layui-btn layui-btn-sm add-menu">+ 添加律所</button>
    </div>
    <div>
        <table class="layui-hide" id="lawfirm" lay-filter="lawfirm"></table>
    </div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool', 'tablePlus'];

    // 封装函数用于渲染表格
    function renderLawfirmTable(table, tool) {
        return table.render({
            elem: '#lawfirm',
            title: '律所列表',
            is_excel: true,
            excel_limit: 2000,
            url: "/lawyer/lawfirm/index", // 数据接口
            page: true, // 开启分页
            limit: 20,
            height: 'full-85',
            cols: [
                [ // 表头
                    {
                        field: 'id',
                        title: '编号',
                        align: 'center',
                        width: 80,
                        templet: ({ id }) => `F${id}`
                    },
                    { field: 'title', title: '律所名称' },
                    { field: 'province', title: '省', width: 100, align: 'center' },
                    { field: 'city', title: '市', width: 100, align: 'center' },
                    { field: 'dist', title: '区', width: 100, align: 'center' },
                    { field: 'address', title: '详细地址', width: 480 },
                    {
                        width: 120,
                        title: '操作',
                        align: 'center',
                        templet: (d) => {
                            const btn1 = '<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</button>';
                            const btn2 = '<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>';
                            return `<div class="layui-btn-group">${btn1}${btn2}</div>`;
                        }
                    }
                ]
            ]
        });
    }

    // 封装添加律所按钮点击事件处理函数
    function handleAddMenuClick(tool) {
        $('body').on('click', '.add-menu', () => {
            tool.side("/lawyer/lawfirm/add");
        });
    }

    // 封装表格操作按钮事件处理函数
    function handleTableToolEvents(table, tool) {
        table.on('tool(lawfirm)', (obj) => {
            if (obj.event === 'edit') {
                tool.side(`/lawyer/lawfirm/add?id=${obj.data.id}`);
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, (index) => {
                    const callback = (e) => {
                        layer.msg(e.msg);
                        if (e.code === 0) {
                            obj.del();
                        }
                    };
                    tool.delete("/lawyer/lawfirm/delete", { id: obj.data.id }, callback);
                    layer.close(index);
                });
            }
        });
    }

    // 封装搜索表单提交事件处理函数
    function handleSearchSubmit(form) {
        form.on('submit(webform)', (data) => {
            layui.pageTable.reload({
                where: {
                    keywords: data.field.keywords
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });
    }

    function gouguInit() {
        const { tablePlus: table, tool, form } = layui;

        // 渲染表格
        layui.pageTable = renderLawfirmTable(table, tool);

        // 处理添加律所按钮点击事件
        handleAddMenuClick(tool);

        // 处理表格操作按钮事件
        handleTableToolEvents(table, tool);

        // 处理搜索表单提交事件
        handleSearchSubmit(form);
    }
</script>
{/block}
<!-- /脚本 -->